<form  [formGroup]="searchForm" autocomplete="off">
  <div  class="dropdown">
    <div *ngIf="searchType == checkSearchType.company">
      <input id="{{navigationId}}" type="text" [attr.placeholder]="placeholder" formControlName="term" class="form-control search-input" #searchField />
      <div *ngIf="showResults" class="row">
        <div class="col-md-12">
          <div class="card search-results shadow" (scroll)='scroll($event)'>
            <div *ngIf="searchResults.length > 0" class="list-group list-group-flush">
              <app-search-result class="list-group-item" [navigationId]="navigationId"
                [company]="company" [term]="term" [hasAddButton]="hasAddButton"
                (companyAdded)="addCompanyClicked($event)"
                [ngClass]="{'link': company.isEnabled}" *ngFor="let company of searchResults"></app-search-result>
            </div>
            <div *ngIf="showResults && searchResults.length === 0" class="p-3">
              No Matches Found
            </div>
          </div>
        </div>
      </div>
    </div>
    <div *ngIf="searchType == checkSearchType.portfolio">
      <input type="text" placeholder="Portfolio Name" name="portfolioNameSearch" formControlName="term" class="form-control" #searchField/>
      <div *ngIf="showResults" class="row">
        <div class="col-md-12">
          <div *ngIf="searchResults.length > 0" class="card search-results shadow" (scroll)='scroll($event)'>
            <div class="list-group list-group-flush">
              <li class="list-group-item link" *ngFor="let portfolio of searchResults">
                  <div class="companyName"  (click)="itemNameSelected(portfolio.id, portfolio.name)" >{{ portfolio.name }} </div>
              </li>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>
























<!--
<div #searchElem>
  <input type="text" placeholder="Find a company by name or symbol" [(ngModel)]="term"
    class="form-control search-input dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" *ngFor="let company of found">
          TESTING
          <div class="row" [routerLink]="['/research', 'company', company.companyNameUrlFriendly, 'overview']" >
            <div class="col-md-7">
                <div class="companyName">{{ company.companyName }}</div>
                <span class="companyInfo mr-2">{{ company.subPeerGroup }}</span>|<span class="companyInfo ml-2">{{ company.country }}</span>
            </div>
            <div class="col-md-3">
              {{ company.tickerAndExchange }}
            </div>
            <div class="col-md-2">

            </div>
          </div>
        </a>
    </div>


</div>
-->